<template>
  <div class="layout">
    <Header />
    <div class="container">
      <div class="table-container">
        <div class="info">
          <div class="table-name">
            账户信息<span style="float: right"
              ><el-button
                size="small"
                type="primary"
                :icon="Search"
                @click="handleAddAcount"
                >添加账户</el-button
              ></span
            >
          </div>
          <el-config-provider :locale="zhCn">
            <el-table
              :data="accountTableData"
              border
              style="width: 100%"
              :row-style="tableRowStyle"
            >
              <el-table-column prop="account" label="账户" width="200" />
              <el-table-column prop="name" label="用户名" />
              <el-table-column label="操作" width="85">
                <template #default="scope">
                  <el-button
                    size="small"
                    type="text"
                    :icon="Search"
                    @click="handleDelete"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <div class="space-15"></div>

            <el-pagination
              size="small"
              background
              layout="total, sizes, prev, pager, next"
              :current-page="accountTableCurrentPage"
              :page-size="accountTablePageSize"
              :page-sizes="[5, 10]"
              :total="accountTableTotal"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-config-provider>
        </div>
      </div>
    </div>
  </div>

  <el-dialog
    v-model="dialogVisible"
    title="添加账户"
    width="400px"
    :before-close="handleClose(ruleFormRef)"
  >
    <el-form
      label-position="left"
      label-width="80px"
      :model="formLabelAlign"
      :rules="rules"
      ref="ruleFormRef"
    >
      <el-form-item label="账 户" prop="account">
        <el-input v-model="formLabelAlign.account"></el-input>
      </el-form-item>
      <el-form-item label="密 码" prop="password">
        <el-input v-model="formLabelAlign.password"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit(ruleFormRef)"
        >确认</el-button
      >
    </template>
  </el-dialog>
</template>
  
  <script setup>
import { ref, reactive, onMounted } from "vue";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import Header from "@/components/Header.vue";
import { setLocation, fetchBasicInfoData } from "@/api/get-data.js";
import { ElMessage, ElMessageBox } from "element-plus";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

let ruleFormRef = ref();
let accountTableData = reactive([
  {
    account: "admin",
    name: "管理员",
  },
]);
let accountTableCurrentPage = ref(1);
let accountTablePageSize = ref(5);
let accountTableTotal = ref(20);
let dialogVisible = ref(false);
let formLabelAlign = reactive({
  account: "",
  password: "",
});

let rules = reactive({
  account: [
    {
      required: true,
      trigger: "blur",
      message: "请输入账户"
    },
  ],
  password: [
    {
      required: true,
      trigger: "blur",
      message: "请输入密码"
    },
  ],
});

const tableRowStyle = (row) => {
  return row.rowIndex % 2 === 0
    ? { background: "rgba(14, 95, 255, 0.05)", cursor: "pointer" }
    : { background: "rgba(14, 95, 255, 0.15)", cursor: "pointer" };
};

// 分页大小改变时的回调
const handleSizeChange = (val) => {
  mapStore.accountTablePageSize = val;
  fetchBasicInfoData(
    mapStore.accountTableCurrentPage,
    mapStore.accountTablePageSize
  );
};

// 当前页改变时的回调
const handleCurrentChange = (val) => {
  mapStore.accountTableCurrentPage = val;
  fetchBasicInfoData(
    mapStore.accountTableCurrentPage,
    mapStore.accountTablePageSize
  );
};

const handleAddAcount = () => {
  dialogVisible.value = true;
};

const handleSubmit = (formEl) => {
  console.log("formEl");
  console.log(formEl);
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      dialogVisible.value = false;
    //   formEl.resetFields();
    } else {
      console.log("error!");
    //   formEl.resetFields();
    }
  });
};

const handleClose = (formEl) => {
    if(!formEl) return;
    formEl.resetFields();
}

const handleDelete = () => {
  console.log("handleDelete");
  ElMessageBox.confirm("确定删除该账户吗？", "确认")
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "删除已取消",
      });
    });
};
</script>
  
  <style scoped>
.container {
  width: 1440px;
  margin: 0 auto;
  padding: 10px;
  height: 100%;
}

.table-container {
  width: 100%;
  height: 100%;
  overflow-x: auto;
}

.table-name {
  height: 50px;
  line-height: 40px;
  padding-left: 15px;
  background: url("./assets/images/holder.png") no-repeat scroll left center;
  background-size: cover;
  color: #fff;
  font-size: 20px;
}

.el-table {
  /* --el-table-border-color: transparent;
  --el-table-border: none; */
  /* --el-table-border: 1px solid rgba(19, 84, 134, 0.25); */
  --el-table-border-color: rgba(11, 53, 109, 0.25);
  --el-table-border: 1px solid rgba(11, 53, 109, 0.25);
  --el-table-text-color: #bdbdbe;
  --el-table-header-text-color: #bdbdbe;
  /* --el-table-row-hover-bg-color: transparent; */
  --el-table-row-hover-bg-color: rgba(14, 95, 255, 0.25);
  /* --el-table-current-row-bg-color: transparent; */
  --el-table-current-row-bg-color: rgba(19, 84, 134, 0.5);
  /* --el-table-header-bg-color: transparent; */
  --el-table-header-bg-color: rgba(19, 84, 134, 0.5);
  /* --el-table-bg-color: transparent; */
  --el-table-bg-color: rgba(19, 84, 134, 0.25);
  /* --el-table-tr-bg-color: transparent; */
  --el-table-tr-bg-color: rgba(19, 84, 134, 0.25);
  --el-table-expanded-cell-bg-color: transparent;
}

.table-container /deep/ .el-table__header thead th {
  font-weight: bold !important;
}
</style>
  